<template>
  <div class="transportQuery" id="transportQuery">
    <!-- 铁路运价查询 2018/2/19 20:12 zhangQ -->
    <div class="transportInfo">
      <div class="wrap">
        <div>
          <h1>铁路运价查询</h1>
          <p>RAILWAY FREIGHT ENQUIRY</p>
        </div>
        <Card style="width: 960px; margin-top: 20px;">
          <Form :model="queryForm" :label-width="100">
            <Row>
              <i-col :span="8">
                <FormItem label="品名">
                  <!--<Select v-model="queryForm.productNameId" filterable placeholder="请输入品名">-->
                  <!--<Option v-for="item in productList" :value="item.pmId" :key="item.pmId">{{ item.pmName }}-->
                  <!--</Option>-->
                  <!--</Select>-->
                  <Select v-model="queryForm.productNameId" filterable placeholder="请输入品名" remote clearable
                          :remote-method="loadProductListData" :loading="pmloading">
                    <Option v-for="item in productList" :value="item.pmId" :key="item.pmId">{{ item.pmName }}</Option>
                  </Select>
                </FormItem>
                <FormItem label="发站名">
                  <Select v-model="queryForm.startStationCode" filterable placeholder="请输入发站名">
                    <Option v-for="item in stationInfo" :value="item.stationCode" :key="item.stationCode">{{
                      item.stationName }}
                    </Option>
                  </Select>
                </FormItem>
                <FormItem label="到站名">
                  <Select v-model="queryForm.endStationCode" filterable placeholder="请输入到站名">
                    <Option v-for="item in stationInfo" :value="item.stationCode" :key="item.stationCode">{{
                      item.stationName }}
                    </Option>
                  </Select>
                </FormItem>
              </i-col>
              <i-col :span="8">
                <FormItem label="是否上门取货">
                  <i-switch v-model="queryForm.isSmqh" size="large" true-value="1" false-value="0">
                    <span slot="open">On</span>
                    <span slot="close">Off</span>
                  </i-switch>
                </FormItem>
                <FormItem label="是否上门装车">
                  <i-switch v-model="queryForm.isSmzc" size="large" true-value="1" false-value="0">
                    <span slot="open">On</span>
                    <span slot="close">Off</span>
                  </i-switch>
                </FormItem>
                <FormItem label="是否送货上门">
                  <i-switch v-model="queryForm.isShsm" size="large" true-value="1" false-value="0">
                    <span slot="open">On</span>
                    <span slot="close">Off</span>
                  </i-switch>
                </FormItem>
              </i-col>
              <i-col :span="8">
                <FormItem label="是否上门卸车">
                  <i-switch v-model="queryForm.isSmxc" size="large" true-value="1" false-value="0">
                    <span slot="open">On</span>
                    <span slot="close">Off</span>
                  </i-switch>
                </FormItem>
                <FormItem label="是否铁路装卸">
                  <i-switch v-model="queryForm.isTlzc" size="large" true-value="1" false-value="0">
                    <span slot="open">On</span>
                    <span slot="close">Off</span>
                  </i-switch>
                </FormItem>
                <FormItem class="tlyjcxbutton">
                  <Button type="primary" @click="submitQuery">查询</Button>
                  <Button type="warning" @click="submitQueryReset">重置</Button>
                </FormItem>
              </i-col>
            </Row>
          </Form>
          <Table :columns="freightTable" :data="freightData"></Table>
        </Card>
      </div>
    </div>
    <div style="clear:both"></div>
  </div>
</template>
<script>
  import {getStationInfo, queryFreight} from '@api/frontEnd'
  import _ from 'lodash'
  import productListData from '../../../../components/common/productList'

  export default {
    name: 'transportQuery',
    data () {
      let queryForm = {
        productNameId: '',
        startStationCode: '',
        endStationCode: '',
        isSmxc: '0',
        isSmzc: '0',
        isSmqh: '0',
        isShsm: '0',
        isTlzc: '0'
      }
      let productList = []
      let pmloading = false
      let stationInfo = []
      let freightTable = [
        {
          title: '20英尺集装箱',
          align: 'center',
          key: 'jzx20'
        }, {
          title: '整车',
          align: 'center',
          key: 'zc'
        }, {
          title: '零散快运',
          align: 'center',
          key: 'lsky'
        }, {
          title: '批量零散',
          align: 'center',
          key: 'plls'
        }, {
          title: '40英尺集装箱',
          align: 'center',
          key: 'jzx40'
        }, {
          title: '服务类型',
          align: 'center',
          key: 'type'
        }]
      let freightData = []
      let datas = {queryForm, productList, stationInfo, freightTable, freightData, pmloading}
      return datas
    },
    methods: {
      loadProductListData (txt) {
        if (txt) {
          this.pmloading = true
          setTimeout(() => {
            this.pmloading = false
            let upTxt = txt.toUpperCase()
            let lowTxt = txt.toLowerCase()
            let resSource = _.filter(productListData, function (sourceItem) {
              return (_.includes(sourceItem['pmName'], upTxt) || _.includes(sourceItem['pmName'], lowTxt) || _.includes(sourceItem['pNamePy'], upTxt) || _.includes(sourceItem['pNamePy'], lowTxt))
            })
            this.productList = resSource
          }, 200)
        } else {
          this.productList = []
        }
      },
      getStationInfo () {
        getStationInfo().then(res => {
          if (res.data.isSuccess === 1) {
            this.stationInfo = res.data.data
          }
        })
      },
      submitQuery () {
        queryFreight(this.queryForm).then(res => {
          if (res.data.isSuccess === 1) {
            this.freightData = res.data.data
          } else {
            this.$Notice.info({
              title: '抱歉，无搜索结果',
              desc: '请更换查询条件',
              duration: 2
            })
          }
        })
      },
      submitQueryReset () {
        this.queryForm = Object.assign({}, {
          productNameId: '',
          startStationCode: '',
          endStationCode: '',
          isSmxc: '0',
          isSmzc: '0',
          isSmqh: '0',
          isShsm: '0',
          isTlzx: '0'
        })
      }
    },
    mounted () {
      // this.getProductInfo()
      this.getStationInfo()
    }
  }
</script>
<style scoped>
  .transportQuery {
    background: #fff;
    background-image: url('../../../../../static/img/img_homebg02.png');
    padding-bottom: 20px;
    padding-top: 80px;
  }

  .transportInfo {
    height: 100%;
    margin: 0 auto;
    width: 960px;
  }

  .wrap {
    width: 100%;
    margin: 0px auto;
  }
</style>
